<template>
	<div class="group-i-join">
		<div class="title-name title-border clear">
			<div class="title-name-l fl">
				<router-link to="/group/manage/iJoin">我加入的圈组</router-link>
				<router-link to="/group/manage/inviteMe">邀请我的圈组</router-link>
			</div>
			<div class="title-name-r fr">
				<router-link to="/group/groupAdd">创建圈组</router-link>
			</div>
		</div>
		<div class="teacher-train" v-loading="loading">
			<ul>
				<li class="teacher-train-list clear" v-for="item of groupListData" :key="item.id">
					<router-link :to="{
							path: '/group/introduct',
							query: { id: item.id }
						}" class="train-list-cover fl">
						<img :src="BASE_URL + item.picture" :onerror="errorImg" />
					</router-link>
					<div class="train-list-content">
						<div class="train-list-title clear">
							<router-link :to="{
									path: '/group/introduct',
									query: { id: item.id }
								}">
								{{ item.name }}
							</router-link>
							<div class="train-list-operation fr">
								<el-popover placement="bottom" width="120" popper-class="ioperation_hover" trigger="hover">
									<ul class="r_ioperation">
										<li v-if="item.sgu_status == 3">审核中</li>
										<template v-else>
											<li>
												<router-link :to="{
														path: '/group/manageOne',
														query: { id: item.id }
													}">
													查看圈组
												</router-link>
											</li>
											<li @click="quitGroup(item.id)">退出圈组</li>
											<li class="uploadTeachingPlan">
												上传教案
												<ul class="r_ioperation01">
													<li @click="open_dialog(item.id, 'v')">关联视频</li>
													<li v-if="isSchool" @click="open_dialog(item.id, 'p')">关联试卷</li>
													<li @click="open_dialog(item.id, 'r')">关联资源</li>
													<li @click="upload_group_id = item.id">
														<template>
															<uploader class="uploader-example" v-loading.fullscreen.lock="upload_files_loading" element-loading-text="上传中,请勿刷新浏览器..."
															 element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" ref="uploader"
															 :options="uploadOptions" :file-status-text="statusText" @file-added="fileAdded" @file-success="fileSuccess"
															 @file-error="fileFail">
																<uploader-unsupport></uploader-unsupport>
																<uploader-drop>
																	<uploader-btn>本地上传</uploader-btn>
																</uploader-drop>
															</uploader>
														</template>
													</li>
												</ul>
											</li>
										</template>
									</ul>
									<i slot="reference" class="el-icon-arrow-down"></i>
								</el-popover>
							</div>
						</div>
						<div class="train-list-label">
							<span>{{ item.grade_name }}</span>
							<span>{{ item.subject_name }}</span>
						</div>
						<div class="train-list-info">
							<span>
								创建人:
								<i>{{ item.create_name }}</i>
							</span>
							<span>
								创建时间:
								<i>{{ item.create_time }}</i>
							</span>
						</div>
						<div class="i_grouplTxt_xm clear">
							<span>
								<i class="ipng quanzu_icon06"></i>
								<i>成员 : {{ item.u_count }}</i>
							</span>
							<span>
								<i class="ipng quanzu_icon07"></i>
								<i>公告 : {{ item.news_count }}</i>
							</span>
							<span>
								<i class="ipng quanzu_icon08"></i>
								<i>教案 : {{ parseInt(item.res_count + item.video_count + item.test_count) }}</i>
							</span>
						</div>
					</div>
				</li>
			</ul>
			<el-pagination background v-if="total_number > page_size" class="pageing" @current-change="currentChange(page_index, 'groupList')"
			 :current-page.sync="page_index" :page-size="page_size" layout="total, prev, pager, next, jumper" :total="total_number"></el-pagination>
		</div>
		<el-dialog class="video_dialog i_join_dialog" :title="resource_type == 'v' ? '选择视频' : resource_type == 'p' ? '选择试卷' : '选择资源'"
		 :visible.sync="dialogFlag" width="800px" @close="close_i_dialog">
			<el-row>
				<template v-if="isMulti">
					<el-col :span="8">
						<vCascader v-model="org" :options="orgData" size="small"></vCascader>
					</el-col>
					<el-col :span="8" v-if="resource_type == 'v'">
						<el-select v-model="videoId" size="small" @change="searchKeywords" clearable placeholder="请选择视频分类">
							<el-option v-for="item in videoClassify" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</el-col>
					<el-col :span="8" v-else-if="resource_type == 'r'">
						<el-select v-model="resourceId" size="small" @change="searchKeywords" clearable placeholder="请选择资源分类">
							<el-option v-for="item in resourceClassify" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</el-col>
				</template>
				<el-col :span="8">
					<el-input :placeholder="resource_type == 'v' ? '搜索视频名' : resource_type == 'p' ? '搜索试卷名' : '搜索资源名'" class="input-with-select"
					 size="small" v-model="keyword" @keyup.enter.native="searchKeywords">
						<el-button slot="append" icon="el-icon-search" @click="searchKeywords"></el-button>
					</el-input>
				</el-col>
			</el-row>
			<template>
				<el-table ref="multipleTable" :data="i_table_data" border tooltip-effect="dark" style="width: 100%"
				 @selection-change="getIdStringChecked">
					<el-table-column type="selection" width="35" align="center"></el-table-column>
					<template v-if="resource_type == 'v'">
						<el-table-column prop="video_name" label="视频名" width="200" align="center" show-overflow-tooltip></el-table-column>
						<el-table-column prop="category" label="视频分类" align="center" show-overflow-tooltip></el-table-column>
						<el-table-column prop="profile" label="视频信息" width="200" align="center" show-overflow-tooltip></el-table-column>
						<el-table-column prop="create_time" label="上传时间" width="200" align="center" show-overflow-tooltip></el-table-column>
					</template>
					<template v-if="resource_type == 'p'">
						<el-table-column prop="name" label="试卷名" width="300" align="center" show-overflow-tooltip></el-table-column>
						<el-table-column prop="category" label="试卷分类" align="center" show-overflow-tooltip></el-table-column>
						<el-table-column prop="create_time" label="上传时间" width="300" align="center" show-overflow-tooltip></el-table-column>
					</template>
					<template v-if="resource_type == 'r'">
						<el-table-column prop="name" label="资源名" width="200" align="center" show-overflow-tooltip></el-table-column>
						<el-table-column label="资源分类" align="center" show-overflow-tooltip>
							<template slot-scope="scope">
								{{ scope.row.category == '' ? '暂无绑定资源分类' : scope.row.category }}
							</template>
						</el-table-column>
						<el-table-column label="资源类型" width="200" align="center" show-overflow-tooltip>
							<template slot-scope="scope">
								{{ file_type_arr[scope.row.file_type - 1] }}
							</template>
						</el-table-column>
						<el-table-column prop="create_time" label="上传时间" width="200" align="center" show-overflow-tooltip></el-table-column>
					</template>
				</el-table>
				<el-pagination background v-if="i_total_number > i_page_size" class="pageing" @current-change="currentChange(i_page_index, 'i')"
				 :current-page.sync="i_page_index" :page-size="i_page_size" layout="prev, pager, next" :total="i_total_number"></el-pagination>
				<div class="group-add-tableBtns">
					<el-button size="small" @click="toggleSelection()">取消选中</el-button>
					<el-button size="small" type="primary" @click="sureSelect(i_group_id, i_checked_idString)">确定</el-button>
				</div>
			</template>
		</el-dialog>
		<div class="dependent" v-if="placeholder">
			<i class="ipng image_state01"></i>
			<p>还没发现任何相关的内容哦~</p>
		</div>
	</div>
</template>

<script>
	import vCascader from "@/components/common/custom-cascader";

	export default {
		components: {
			vCascader
		},
		data() {
			return {
				loading: true,
				errorImg: 'this.src="' + require('../../../../public/images/image_loding.png') + '"',
				orderby: 'time',
				placeholder: false,
				groupListData: [],
				page_index: 1,
				page_size: 8,
				total_number: 0,
				i_join_url: {
					video_url: '/api/video/video_list',
					paper_url: '/api/test/test',
					resource_url: '/api/resource/resource'
				},
				resource_type: '',
				i_page_index: 1,
				i_page_size: 5,
				i_total_number: 0,
				i_group_id: '',
				i_checked_idString: '', //checkbox选中的资源id值组成的字符串
				keyword: '',
				dialogFlag: false,
				i_table_data: [],
				video_group_size: 10,
				resource_group_size: 5,

				file_type_arr: ['文档', '日志', '图片', '压缩文件', '音频文件', '视频', '应用程序', '其他'],
				upload_files_loading: false,
				upload_group_id: 0,
				statusText: {
					success: '上传成功',
					error: '上传出错',
					uploading: '正在上传...',
					paused: '暂停',
					waiting: '等待上传'
				},
				uploadOptions: {
					target: this.BASE_URL + '/api/resource/res_upload',
					testChunks: false,
					headers: {
						Authorization: `Bearer ` + this.$g.access_token
					}
				},
				// 多级-搜索条件
				org: [],
				orgData: [],
				videoId: '',
				videoClassify: [],
				resourceId: '',
				resourceClassify: [],

			};
		},
		created() {
			this.get_groupList();

		},
		watch: {
			org: {
				handler(newVal) {
					this.searchKeywords();
				},
				immediate: true
			}
		},
		computed: {
			isMulti() {
				return this.$store.getters.isMulti;
			},
			isSchool() {
				return this.$store.getters.isSchool;
			},
		},
		methods: {
			get_groupList() {
				let success = res => {
					let data = res.data;
					this.groupListData = data.data;
					this.total_number = parseInt(data.data_sum);
					this.loading = false;
					this.groupListData.length === 0 ? (this.placeholder = true) : (this.placeholder = false);
				};
				this.$ajax({
					url: '/api/group/group_list',
					method: 'get',
					params: {
						user_id: this.$store.getters.userInfo.id,
						page: this.page_index,
						length: this.page_size,
						flag: 'home',
						gu_status: '1,3',
						status: 1,
						personal_index_data: 1
					},
					func: {
						success: success
					}
				});
			},
			quitGroup(id) {
				this.$confirm('退出圈组会失去该圈组的相关权限功能，确定退出？', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning',
						customClass: 'confirm-them'
					})
					.then(() => {
						let success = res => {
							this.get_groupList();
							this.$message.success(res.msg);
						};
						this.$ajax({
							url: '/api/group/group_user',
							method: 'delete',
							params: {
								user_id: this.$store.getters.userInfo.id,
								group_id: id
							},
							func: {
								success: success
							}
						});
					})
					.catch(() => {});
			},
			fileAdded(file) {
				if (file.size > 2000 * 1024 * 1024) {
					this.$message.error("附件大小不能超过2G");
					file.ignored = true;
					return false;
				}
				this.upload_files_loading = true;
			},
			fileSuccess(rootFile, file, message, chunk) {
				var mess = eval('(' + message + ')');
				mess = handleResponseData(mess);
				const fileName = mess.data.file_name.substring(0,mess.data.file_name.length - mess.data.post_fix.length-1);
				var params = {
					file_path: mess.data.file_path,
					file_type: mess.data.file_type,
					file_name: fileName,
					post_fix: mess.data.post_fix,
					group_id: this.upload_group_id
				};
				let success = res => {
					this.upload_files_loading = false;
					this.get_groupList();
					this.$message.success(res.msg);
				};
				this.$ajax.post('/api/group/bind_resource', params, {
					func: {
						success: success
					}
				});
			},
			fileFail(rootFile, file, message, chunk) {
				var mess = eval('(' + message + ')');
				if (parseInt(mess.error) === 401 && this.uploadRetryTimes > 0) {
					let callbcak = data => {
						this.uploadRetryTimes--;
						this.$refs.uploader.uploader.retry(file);
					};
					this.get_access_token(callbcak);
				} else {
					this.$message.error(mess.msg);
				}
			},
			open_dialog(id_val, type) {
				this.resource_type = type;
				this.i_group_id = id_val;
				this.keyword = '';
				this.i_table_data = [];
				this.dialogFlag = true;
				this.searchKeywords();
				if (this.isMulti) { //多级
					this.getOrg();
					if (type === 'v') {
						this.getVideoClassify();
					} else if (type === 'r') {
						this.getResourceClassify();
					}
				}
			},
			getTableData(_url) {
				let _params = {};
				if (this.resource_type == 'v') {
					_params = {
						keyword: this.keyword,
						page_index: this.i_page_index,
						length: this.video_group_size,
						flag: 'home',
						page_size: this.i_page_size,
						//多级搜索条件
						platform_id: this.org[0],
						grade_id: this.org[1],
						subject_id: this.org[2],
						cate_id: this.videoId,
						check_app_code: sessionStorage.getItem('CheckSchoolAppCode'),
						// create_id: this.$store.getters.userInfo.id,
						// other_authority: 1,
						// status: 1,
						status: 1,
						authority: 1,
					};
				} else if (this.resource_type == 'p') {
					_params = {
						
						keyword: this.keyword,
						page_index: this.i_page_index,
						page_size: this.i_page_size,
						// user_id: this.$store.getters.userInfo.id,
						// authonity: 1,
						// other_authority: 1,
						// status: 1
						status: 1,
						authonty: 1,
					};
				} else if (this.resource_type == 'r') {
					_params = {
					
						name: this.keyword,
						page: this.i_page_index,
						size: this.resource_group_size,
						data_type: 2,
						//多级搜索条件:
						have_lase: 1,
						platform_id: this.org[0],
						grade_id: this.org[1],
						subject_id: this.org[2],
						cate_id: this.resourceId,
						check_app_code: sessionStorage.getItem('CheckSchoolAppCode'),
						// create_id: this.$store.getters.userInfo.id,
						// authonity: 1,
						// other_authority: 1,
						// status: 1,
						status: 1,
						authonity: 1,
					};
				}
				let success = res => {
					this.i_table_data = res.data.data;
					this.i_page_index = parseInt(res.data.page_index);
					this.i_total_number = parseInt(res.data.data_sum);
				};
				this.$ajax({
					url: _url,
					method: 'get',
					params: _params,
					func: {
						success: success
					}
				});
			},
			searchKeywords() {
				if (this.resource_type == 'v') {
					this.getTableData(this.i_join_url.video_url);
				} else if (this.resource_type == 'p') {
					this.getTableData(this.i_join_url.paper_url);
				} else if (this.resource_type == 'r') {
					this.getTableData(this.i_join_url.resource_url);
				}
			},
			getIdStringChecked(val) {
				this.i_checked_idString = arrChangeString(val, 'id');
			},
			toggleSelection(rows) {
				if (rows) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row);
					});
				} else {
					this.$refs.multipleTable.clearSelection();
				}
			},
			sureSelect(group_id, resource_id) {
				let success = res => {
					this.dialogFlag = false;
					this.get_groupList();
				};
				this.$ajax({
					url: '/api/group/group_something',
					method: 'post',
					data: {
						origin: this.resource_type == 'v' ? 0 : this.resource_type == 'p' ? 2 : 1,
						group_id: group_id,
						resource_id: resource_id,
						is_share: 1
					},
					func: {
						success: success
					}
				});
			},
			close_i_dialog() {
				this.i_page_index = 1;
				this.i_page_size = 5;
				this.i_total_number = 0;
				this.resource_type = '';
				this.keyword = '';
				this.i_table_data = [];
			},
			currentChange(val, type) {
				if (type == 'groupList') {
					this.page_index = val;
					this.get_groupList();
				} else if (type == 'i') {
					this.i_page_index = val;
					this.searchKeywords();
				}
			},
			// 多级-获取学校-年级-班级
			getOrg() {
				this.orgData = [];
				let success = res => {
					this.orgData.push(res.data);
				};
				this.$ajax({
					url: 'api/network/get_org_subject',
					method: 'get',
					params: {
						app_code: sessionStorage.getItem('CheckSchoolAppCode'),
					},
					func: {
						success: success
					}
				});
			},
			// 多级-获取资源分类
			getResourceClassify() {
				let success = res => {
					this.resourceClassify = res.data.data;

				};
				this.$ajax({
					url: 'api/resource/resource_cate',
					method: 'get',
					params: {
						keyword: "",
					},
					func: {
						success: success
					}
				});
			},
			// 多级-获取视频分类
			getVideoClassify() {
				let success = res => {
					this.videoClassify = res.data;
				};
				this.$ajax({
					url: 'api/video/video_cate',
					method: 'get',
					params: {
						keyword: "",
					},
					func: {
						success: success
					}
				});
			},
		}
	};
</script>
